import { useCallback, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import Taro from '@tarojs/taro';
import { AtActivityIndicator } from 'taro-ui';
import { View, Text, Swiper, SwiperItem } from '@tarojs/components';
import './index.scss';
import { TJobListItem } from '../../types';
import { EStatus, toStatusString } from '../../utils';
import { TStateType } from '../../redux/reducers';
import TopIcon, { EIcon, StatusIconTypeArray } from '../top-icon/index.weapp';

interface ICardProps {
  isLoading: boolean;
  setIsLoading?: (isLoading: boolean) => void;
}

const Card = (props: ICardProps) => {
  const { isLoading } = props;

  const originData: TJobListItem[] = useSelector((state: TStateType) => state.jobList);

  const [activePlanList, setActivePlanList] = useState<TJobListItem[]>([]);

  const getModifyTime = useCallback((item: TJobListItem) => {
    let renderTimeAndAssignee: Date;
    switch (item.status) {
      case EStatus.NoStart:
        renderTimeAndAssignee = new Date(item.createDetials.time);
        break;
      case EStatus.InProgress:
        renderTimeAndAssignee = new Date(item.inProgressDetials.time);
        break;
      case EStatus.Resolved:
        renderTimeAndAssignee = new Date(item.resolvedDetials.time);
        break;
      case EStatus.Ready:
        renderTimeAndAssignee = new Date(item.readyDetials.time);
        break;
      case EStatus.Closed:
        renderTimeAndAssignee = new Date(item.closedDetials.time);
        break;
      default:
        renderTimeAndAssignee = new Date();
        break;
    }
    return renderTimeAndAssignee;
  }, []);

  const sortJobList = useCallback(
    (list: TJobListItem[]) => {
      const sortList = list.sort((a, b) => {
        return getModifyTime(b).getTime() - getModifyTime(a).getTime();
      });
      return sortList;
    },
    [getModifyTime]
  );

  const renderIcon = useCallback((item: TJobListItem) => {
    return <TopIcon type={EIcon.StatusIcon} name={StatusIconTypeArray[item.status]} size={35} />;
  }, []);

  useEffect(() => {
    setActivePlanList(sortJobList([...originData]).splice(0, 5));
  }, [originData, sortJobList]);

  return (
    <View className='plan-card-body'>
      <View className='plan-card-header'>
        <Text className='active-plan-text'>- Active Plan (Top 5) -</Text>
      </View>
      <View className='wrapper'>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          vertical
          indicatorDots={!isLoading}
        >
          {isLoading ? (
            <SwiperItem>
              <View className='active-plan'>
                <AtActivityIndicator mode='center' content='Loading...' color='white' />
              </View>
            </SwiperItem>
          ) : activePlanList.length === 0 ? (
            <SwiperItem>
              <View className='active-plan'>
                <View className='active-plan-empty'>no data to show.</View>
              </View>
            </SwiperItem>
          ) : (
            activePlanList.map(item => (
              <SwiperItem key={item._id}>
                <View className='active-plan'>
                  <View className='active-plan-top'>
                    <View className='active-left'>
                      <View className='active-plan-name'>plan: {item.planName}</View>
                      <View className='active-plan-status'>
                        status: {toStatusString(item.status)} {renderIcon(item)}
                      </View>
                    </View>
                    <View
                      className='active-right'
                      onClick={() => {
                        Taro.navigateTo({
                          url: `/pages/plan/index?_id=${item._id}`
                        });
                      }}
                    >
                      Fllow
                    </View>
                  </View>
                  <View className='active-plan-time'>{`activity time: ${getModifyTime(
                    item
                  ).toLocaleString()}`}</View>
                </View>
              </SwiperItem>
            ))
          )}
        </Swiper>
      </View>
    </View>
  );
};
export default Card;
